<template>
  <div class="popDiv" v-transfer-dom>
    <popup v-model="popupShow" position="right" @on-hide="onHide">
      <div style="width: 4.8rem; padding: 0.4rem;">
        <div class="dateRange">
          <div class="title">日期范围</div>
          <DateGroup plhdText="起始日期" dateType="start" @choDate="choDate" :defaultDateValue="sendObj.startDate"></DateGroup>
          <p>至</p>
          <DateGroup plhdText="结束日期" dateType="end" @choDate="choDate" :defaultDateValue="sendObj.endDate"></DateGroup>
        </div>
        <div class="answerStatus">
          <div class="title">回复状态</div>
          <div :class="['status', sendObj.status == 'all' ? 'active' : '']" @click="handleChangeStatus('all')">全部</div>
          <div class="btnGroup">
            <div :class="['status', sendObj.status == 'no' ? 'active' : '']" @click="handleChangeStatus('no')">未回复</div>
            <div :class="['status', sendObj.status == 'yes' ? 'active' : '']" @click="handleChangeStatus('yes')">已回复</div>
          </div>
        </div>
        <div class="footer">
          <div class="reset" @click="reset">重置</div>
          <div class="confirm" @click.self.prevent="confirm">确定</div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
  import DateGroup from '~/components/DateGroup'
  import ls from 'store2'
  import { TransferDom, Popup } from 'vux'
  export default {
    props: {
      searchPopup: Boolean,
    },
    directives: {
      TransferDom
    },
    components: {
      Popup,
      DateGroup,
    },
    data() {
      return {
        popupShow: false,
        sendObj: {
          startDate: '', // 起始日期
          endDate: '', // 结束日期
          status: 'all', // 回复状态
        },
      }
    },
    watch: {
      searchPopup(boolean) {
        this.popupShow = boolean;
      }
    },
    mounted() {
      this.sendObj.startDate = '';
      this.sendObj.endDate = '';
      this.sendObj.status = 'all';
      ls.set('searchObj', this.sendObj);
    },
    methods: {
      // 选择日期
      choDate(data) {
        if (data.type == 'start') {
          this.sendObj.startDate = data.value;
        } else {
          this.sendObj.endDate = data.value;
        }
      },
      // 更改状态
      handleChangeStatus(status) {
        this.sendObj.status = status;
      },
      confirm() {
        ls.set('searchObj', this.sendObj);
        this.$emit('hidePopup', false);
      },
      reset() {
        this.sendObj.status = 'all';
        this.sendObj.startDate = '';
        this.sendObj.endDate = '';
      },
      onHide() {
        this.$emit('onlyHide', false);
      }
      
    },
  }
</script>

<style lang="less" scoped>
  .popDiv {
    position: relative;

    /deep/ .vux-popup-dialog {
      background: #fff !important;
    }

    .title {
      color: #222;
      font-weight: bold;
      font-size: 0.3rem;
      margin-bottom: 0.24rem;
      line-height: 0.42rem;
    }

    .dateRange {
      margin-bottom: 0.32rem;

      >p {
        font-weight: bold;
        font-size: 0.28rem;
        text-align: center;
        line-height: 0.4rem;
        margin-bottom: 0.24rem;
      }
    }

    .answerStatus {
      margin-bottom: 3.96rem;
      .btnGroup {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .status {
        font-size: 0.28rem;
        color: #222;
        width: 1.88rem;
        height: 0.81rem;
        line-height: 0.81rem;
        background: #F7F7FA;
        border-radius: 0.1rem;
        border:1px solid #E5E8ED;
        text-align: center;
        margin-bottom: 0.28rem;
      }
      .active {
        border: 1px solid #409EFF;
        color: #409EFF;
        background: #FFF;
      }
    }

    .footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .reset {
        color: #999;
        font-size: 0.3rem;
        letter-spacing: 2px;
        margin-right: 0.4rem;
      }
      
      .confirm {
        width: 1.4rem;
        height: 0.64rem;
        line-height: 0.64rem;
        background: #409EFF;
        border-radius: 0.5rem;
        font-size: 0.3rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        letter-spacing: 2px;
      }

    }


  }
  
</style>
